import React, {useEffect, useState} from "react";
import {Layout, LayoutPanel} from "rc-easyui"
import TreePanel from "./tree";
import TablePanel from "./table"
import {PaginationPanel, removeEventFn, useTable, withDocHoc} from "@kordar/easyui-tpl";
import {list} from "../../../service/bucket_service";
import {getBucket} from "./helper";
import {useNavigate} from "react-router-dom";
import {BucketDetailContext} from "./context";
import {DefaultPanel} from "@kordar/easyui";
import {CheckAccessEleType} from "@kordar-lib/base";
import {tparam, tt} from "@kordar-lib/i18n";

let name = "bucket-detail"
let nextName = ""
let accessItems = [
    { type: CheckAccessEleType.AND, value: ["/bucket/detail/tree"], key: "tree" },
    { type: CheckAccessEleType.AND, value: ["/bucket/detail/list"], key: "list" },
    { type: CheckAccessEleType.AND, value: ["/bucket/detail/upload"], key: "upload" },
    { type: CheckAccessEleType.AND, value: ["/bucket/detail/download"], key: "download" },
    { type: CheckAccessEleType.AND, value: ["/bucket/detail/delete"], key: "delete" },
    { type: CheckAccessEleType.AND, value: ["/bucket/detail/cut"], key: "cut" },
    { type: CheckAccessEleType.AND, value: ["/bucket/detail/copy"], key: "copy" },
    { type: CheckAccessEleType.AND, value: ["/bucket/detail/rename"], key: "rename" },
]

const Detail = ({pageConfig}) => {

    const navigate = useNavigate();
    const [bucket, setBucket] = useState(null)
    const queryParams = new URLSearchParams(location.search);
    const id = queryParams.get("id");

    const tb = useTable({
        name: name,
        fetch: async (request) => {
            request.next = ""
            if (request.page > 1) {
                request.next = nextName
            } else {
                request.next = ""
            }
            let res = await list(request)
            let {data} = res
            const lastItem = data.at(-1);
            nextName = lastItem?.path || "";
            return res
        },
        checkAccessItems: accessItems,
        defaultPageSize: 30,
        selectionValue: (item) => item.path
    })

    const [currentPath, setCurrentPath] = useState("")

    tb.ctx.registerEvent("remove-dir", removeEventFn(tb.ctx, tparam(pageConfig, "del_all.text", "whether to clear all files in the directory?")))
    tb.ctx.registerEvent("remove", removeEventFn(tb.ctx))

    useEffect(() => {
        tb.ctx.search({id: id})
        getBucket(id, setBucket, () => navigate("/bucket/detail"))
    }, [])

    return (
        <BucketDetailContext.Provider value={{pageConfig, ctx: tb.ctx, ctxState: tb.ctxState, bucket, currentPath, setCurrentPath}}>
            <div className="panel f-column admin-default-panel cover" style={{margin: 5}}>
                <Layout className="f-column">
                    <LayoutPanel region="west" split style={{width: 300, maxWidth: 450, minWidth: 300}}>
                        <TreePanel/>
                    </LayoutPanel>

                    <LayoutPanel region="center" style={{width: '100%', height: '100%'}}>
                        <div className="f-column f-full" style={{ height: "100%"}} >
                            <DefaultPanel mode="f-full cover" footer={() => <PaginationPanel ctx={tb.ctx} ctxState={tb.ctxState} />}>
                                <TablePanel id={id} />
                            </DefaultPanel>
                        </div>
                    </LayoutPanel>
                </Layout>
            </div>
        </BucketDetailContext.Provider>

    )
}

export default withDocHoc({ name: "BucketDetail" })(Detail)
